<template>
  <div>
    <el-container>
      <el-header  height="100px"  style="text-align: right; font-size: 12px">
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple">

            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span style="font-size: 40px">撮合交易管理系统</span>

            </div>
          </el-col>

          <el-col :span="5">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple-light">
              <el-avatar shape="square" fit="fill" :size="80" src="https://pic3.zhimg.com/80/v2-f9bbed00693ea5b135e9aff7d8bb3c96_1440w.webp"></el-avatar>
              <!--            下拉菜单-->
              <el-dropdown trigger="click" @command="toLogin">
  <span class="el-dropdown-link">
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">个人中心</el-dropdown-item>
                  <el-dropdown-item command="b">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </el-header>

      <el-container>
        <el-aside width="260px">
          <el-image  src="https://cdn.worldvectorlogo.com/logos/childrens-nat-med-center.svg"
                 style="width: 80px;height: 80px">
          </el-image>
          <span> 撮合交易系统</span>
          <el-row class="tac">
            <el-col>
              <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo" router
                  :default-openeds="openeds">
                <!--             第一层菜单-->
                <el-menu-item index="/about"><i class="el-icon-platform-eleme"></i>主页</el-menu-item>

                <el-submenu :index="m1.path" :key="m1.menuId" v-for="m1 in menus">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>{{ m1.menuName }}</span>
                  </template>
                  <!--                第二层点击菜单-->
                  <el-menu-item v-if="m2.menuType == 'C'" :index="m2.path" :key="m2.menuId" v-for="m2 in m1.children">
                    {{ m2.menuName }}
                  </el-menu-item>
                  <!--第二层目录-->
                  <el-submenu v-if="mm2.menuType == 'M'" :index="mm2.path" :key="mm2.menuId" v-for="mm2 in m1.children">
                    <template slot="title">
                      <i class="el-icon-location"></i>
                      <span>{{ mm2.menuName }}</span>
                    </template>
                    <!--                第三层菜单-->
                    <el-menu-item v-if="m3.menuType == 'C'" :index="m3.path" :key="m3.menuId"
                                  v-for="m3 in mm2.children">{{ m3.menuName }}
                    </el-menu-item>
                  </el-submenu>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      //菜单列表
      menus: [],
      //需要默认展开的菜单 一级菜单
      openeds: this.openeds = JSON.parse(sessionStorage.getItem("menus")).map(item => item.path),


    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    toLogin(command) {
      if (command == "b") {
        this.$router.push("/login");
      }
    }
  },
  created() {
    this.menus = JSON.parse(sessionStorage.getItem("menus"));
  }


}
</script>

<style >
.el-row {
  margin-bottom: 20px;

&
:last-child {
  margin-bottom: 0;
}

}
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
}

.bg-purple-light {
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-header, .el-footer {
  /*background-color: #B3C0D1;*/
  color: #333;
  text-align: center;
  line-height: 100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.el-aside {
  /*background-color: #D3DCE6;*/
  color: #333;
  text-align: center;
  line-height: 100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.el-main {
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  /*line-height: 160px;*/
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>